<template>
  <div ref="datumWidth"></div>
  <div
    class="common-layout-else"
    v-infinite-scroll="getRecommendVideos"
    :infinite-scroll-disabled="lazyLoad"
  >
    <div v-for="videoInfo in videoList">
      <video-card1 :videoInfo="videoInfo"></video-card1>
    </div>
  </div>

  <div style="color: grey; margin-bottom: 50px">
    <div v-show="lazyLoad">
      正在玩命加载
      <el-icon class="is-loading">
        <Loading />
      </el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import VideoCard1 from "@/components/VideoCard1.vue";
import videoApi from "@/api/video";
import { isNull } from "@/utils/common";
import { Loading } from "@element-plus/icons-vue";
import { Video } from "@/types/video";

const props = defineProps({
  channelId: {
    required: false,
    type: Number
  },
});
const pageSize = ref<number>(15);
const lazyLoad = ref<boolean>(false);
const videoList = ref<Array<Video>>([]);
// 请求推荐(随机)视频
const getRecommendVideos = () => {
  lazyLoad.value = true;
  // 是否请求指定分区下的视频
  let params = isNull(props.channelId)
    ? { count: pageSize.value }
    : {
        count: pageSize.value,
        channelId: props.channelId,
      };
  videoApi.getRecommendVideo(params).then((res) => {
    if (res.data.code === 0) {
      videoList.value.push(...res.data.data);
    }
    lazyLoad.value = false;
  });
};
const watchChannelId = watch(
  () => props.channelId,
  (val) => {
    videoList.value = [];
    getRecommendVideos();
  },
  { immediate: true }
);

const refreshVideos = () => {
  videoList.value = [];
  getRecommendVideos();
};

defineExpose({ refreshVideos });

onUnmounted(() => {
  watchChannelId();
});
</script>

<style scoped lang="scss">
.common-layout-else {
  display: grid;
  grid-template-columns: repeat(5, auto);

  & > div {
    margin: 10px;
    position: relative;
  }
}
</style>

